<template>
  <div class="meaber">
    <transition name="fade">
      <div class="meabers1" v-if="this.$route.params.tyle  == 1">
        <div class="centre">
          <div class="VipPrice">
            <span>￥{{VIP1.upgradePrice}}</span>
            <i>
              原价￥
              <span>{{VIP1.price}}</span>
            </i>
          </div>
        </div>
        <div class="centre meaber_botton">
          <el-button type="primary" @click="gmbutons(VIP1.upgradePrice ,VIP1.upgradeType  )">确定开通</el-button>
          <span @click="addVIP">已购卡？马上激活</span>
        </div>
<<<<<<< HEAD
        <div class="centre meaber_deatil">
          <div class="meaber_deatil_img">
            <img
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/1576222444814zyk.png"
              alt
            />
          </div>
        </div>
      </div>
    </transition>

=======
        <div class="centre meaber_deatil">志愿卡</div>
      </div>
    </transition>
    <!-- <transition name="fade">
      <div class="meabers2" v-if="this.$route.params.tyle  == 2">
        <div class="centre meaber_botton">
          <el-button type="primary" @click="gmbutons">￥300.00 点击开通</el-button>
          <span @click="addVIP()">已购卡？马上激活</span>
        </div>
        <div class="centre meaber_deatil">钻石卡</div>
      </div>
    </transition>-->
>>>>>>> 314b442cce11d658746227581b0160373004c345
    <transition name="fade">
      <div class="meabers3" v-if="this.$route.params.tyle  == 3">
        <div class="centre">
          <div class="VipPrice">
            <span>￥{{VIP2.upgradePrice}}</span>
            <i>
              原价￥
              <span>{{VIP2.price}}</span>
            </i>
          </div>
        </div>
        <div class="centre meaber_botton">
<<<<<<< HEAD
          <el-button type="primary" @click="gmbutons(VIP2.upgradePrice ,VIP2.upgradeType  )">确定开通</el-button>
=======
          <el-button type="primary" @click="gmbutons(VIP1.upgradePrice ,VIP1.upgradeType  )">确定开通</el-button>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <span @click="addVIP">已购卡？马上激活</span>
        </div>
        <div class="centre meaber_deatil">
          <div class="meaber_deatil_img">
<<<<<<< HEAD
            <img
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/1576222482652zhuanja.png"
              alt
            />
=======
            <img src="@/assets/img/zhuanja.png" alt />
>>>>>>> 314b442cce11d658746227581b0160373004c345
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="meaders_g" v-if="gmbutton == 1">
        <div class="meaders_gm">
          <div class="header_gm">
            <h3>
              <i class="el-icon-close" @click="gmbuton"></i>选择支付方式
            </h3>
          </div>

<<<<<<< HEAD
          <!-- 支付宝支付
            <div class="zfb_gm gm" @click="zfbPayment()">
=======
          <div class="zfb_gm gm" @click="zfbPayment()">
>>>>>>> 314b442cce11d658746227581b0160373004c345
            <span>
              <img src="@/assets/img/zfb.png" alt /> 支付宝
            </span>
            <i class="el-icon-arrow-right"></i>
<<<<<<< HEAD
          </div>-->
=======
          </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <div class="wx_gm gm" @click="wxPayment()">
            <span>
              <img src="@/assets/img/wx.png" alt /> 微信
            </span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="meaders_g" v-if="gmbutton == 2">
        <div class="meaders_gm">
          <div class="header_gm">
            <h3>
              <i class="el-icon-close" @click="gmbuton"></i>激活 VIP
            </h3>
          </div>
          <div class="input">
            <div>
              <el-input placeholder="请输入VIP序列号" prefix-icon="el-icon-bank-card" v-model="input1"></el-input>
            </div>
            <div>
              <el-input placeholder="请输入VIP密码 " prefix-icon="el-icon-lock" v-model="input2"></el-input>
            </div>
          </div>
          <div class="input_button">
            <el-button type="primary" v-if="input1 !='' && input2 !=''  ">激活</el-button>
            <el-button v-else type="primary" disabled>激活</el-button>
          </div>
        </div>
      </div>
    </transition>
<<<<<<< HEAD

=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
    <transition name="fade">
      <div class="wxCode" v-if="wxCode">
        <div class="wxCode_sys">
          <div class="cutwx_code" @click="cutWxCode()">
            <i class="el-icon-close"></i>
          </div>
          <h3>志愿卡(VIP)</h3>
          <div class="wxCode_img">
            <img src="@/assets/img/wx2.png" alt />
            <h4>微信扫一扫</h4>
          </div>
          <div class="wxCode_code">
            <div id="code"></div>
            <canvas class="wxCode_img" id="canvas"></canvas>
          </div>
        </div>
      </div>
    </transition>
<<<<<<< HEAD

    <div v-html="form"></div>
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
  </div>
</template>
<script >
import QRCode from "qrcode";
<<<<<<< HEAD

=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
export default {
  name: "Member",
  data() {
    return {
      wxCode: false,
      tyle: "",
      gmbutton: "",
      input1: "",
      input2: "",
      VIP1: "",
      VIP2: "",
<<<<<<< HEAD
      VIP3: "",
      upgradePrice: "",

      upgradeType: "",
      wxpay_url: "",
      msg: "hello vue",
      codes: "",
      form: ""
=======
      upgradePrice: "",
      upgradeType: "",
      wxpay_url: "",
      msg: "hello vue",
      codes: ""
>>>>>>> 314b442cce11d658746227581b0160373004c345
    };
  },
  components: {
    QRCode: QRCode
  },
  mounted() {
    this.useqrcode();
  },
  methods: {
    gmbuton(q, t) {
      this.gmbutton = 0;
      this.upgradePrice = q;
      this.upgradeType = t;
    },
    gmbutons(q, t) {
      this.gmbutton = 1;
      this.upgradePrice = q;
      this.upgradeType = t;
    },

    addVIP(q, t) {
      this.gmbutton = 2;
    },
    zfbPayment() {
<<<<<<< HEAD
      var isurl = window.location.href;
      this.$ajax({
        method: "POST",
        url: "/api/pay/alipay/web",
        data: {
          returnUrl: isurl,
          body: 1,
          totalFee: 0.01
        },
        success: (res, d) => {
          console.log(res);
          this.form = res.data;
          document.forms[0].submit();
=======
      this.$ajax({
        method: "POST",
        url: "/api/pay/alipay",
        data: {
          body: this.upgradeType,
          callBackUrl: "string",
          payChannel: "ALIPAY",
          rechargeUid: "string",
          serviceCode: "PAY_SERVER",
          specialParams: {},
          subject: "string",
          transactionMount: this.upgradePrice,
          userUid: 0
        },
        success: res => {
          if (res.data.code == 0) {
            var url = res.data.data.data.alipay_url;
            console.log(res.data.data.data.alipay_url);

            window.open(
              "https://excashier.alipay.com/standard/auth.htm?payOrderId=" + url
            );
          }
>>>>>>> 314b442cce11d658746227581b0160373004c345
        }
      });
    },
    wxPayment() {
      this.$ajax({
        method: "POST",
<<<<<<< HEAD
        url: "/api/v1/wxpay/pay",
        data: {
          body: this.upgradeType,
          totalFee: this.upgradePrice * 100,

          isPc: 1
        },
        success: res => {
          if (res.data.code == 0) {
            var url = res.data.data.code_url;
            this.useqrcode(url);
            setTimeout(() => {
              this.getPersonal();
            }, 3000);
=======
        url: "/api/pay/wechatpay",
        data: {
          body: this.upgradeType,
          callBackUrl: "string",
          payChannel: "ALIPAY",
          rechargeUid: "string",
          serviceCode: "PAY_SERVER",
          specialParams: {},
          subject: "string",
          transactionMount: this.upgradePrice * 100,
          userUid: 0
        },
        success: res => {
          if (res.data.code == 0) {
            this.wxpay_url = res.data.data.data.wxpay_url;
>>>>>>> 314b442cce11d658746227581b0160373004c345
          } else {
            this.open3(res.data.msg);
          }
        }
      });
      this.wxCode = true;
    },
    open3(s) {
      this.$message.error(s);
    },
<<<<<<< HEAD
=======
    // onBridgeReady() {

    //   wx.chooseWXPay({
    //     appId: this.wxpay_url.appid, //公众号名称，由商户传入
    //     timeStamp: this.wxpay_url.timestam, //时间戳，自1970年以来的秒数
    //     nonceStr: this.wxpay_url.noncestr, //随机串
    //     package: this.wxpay_url.package, //订单详情扩展字符串
    //     signType: "MD5", //微信签名方式：
    //     paySign: this.wxpay_url.sign, //微信签名,

    //     success: function(res) {
    //       // 支付成功后的回调函数
    //       console.log(res);
    //     }
    //     // 支付成功后的回调函数
    //   });
    // },
>>>>>>> 314b442cce11d658746227581b0160373004c345

    getVipPrice() {
      this.$ajax({
        method: "GET",
        url: "/api/order/pay/getVipPrice",

        success: res => {
          if (res.data.code == 0) {
<<<<<<< HEAD
            if (res.data.data.length >= 2) {
              if (res.data.data.length == 2) {
                this.VIP1 = res.data.data[0];
                this.VIP2 = res.data.data[1];
              } else {
                this.VIP1 = res.data.data[1];
                this.VIP2 = res.data.data[2];
              }
            } else {
              this.VIP2 = res.data.data[0];
            }
=======
            this.VIP1 = res.data.data[1];
            this.VIP2 = res.data.data[2];
>>>>>>> 314b442cce11d658746227581b0160373004c345
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    },
<<<<<<< HEAD
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, url, function(error) {
        if (error) console.error(error);
      });
    },
    getPersonal() {
      this.$ajax({
        method: "POST",
        url: "/api/query/userInfo",

        success: res => {
          if (res.data.code == 0) {
            let isVip = res.data.data.vip;
            if (isVip != localStorage.getItem("vip")) {
              localStorage.setItem("vip", isVip);
              this.routergo();
            } else {
              setTimeout(() => {
                this.getPersonal();
              }, 3000);
            }
          } else {
            this.open3(res.data.msg);
          }
        }
      });
    },
    routergo() {
      console.log(333);
      this.$router.push("/Personal");
    },
=======
    useqrcode() {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, "https://www.baidu.com/", function(error) {
        if (error) console.error(error);
        console.log("QRCode success!");
      });
    },
>>>>>>> 314b442cce11d658746227581b0160373004c345
    cutWxCode() {
      this.wxCode = false;
    }
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getVipPrice();
    });
  }
};
</script>

<style lang="scss" >
.meaber {
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  .VipPrice {
    margin: 20px 0;
    > span {
      color: rgb(241, 30, 30);
      font-size: 16px;
      padding-right: 20px;
    }
    > i {
      color: #a3a3a3;
      font-size: 12px;
      span {
        text-decoration: line-through;
      }
    }
  }
  .meaber_botton {
    .el-button {
      padding: 12px 66px;
    }
    > span {
      color: #2e86ff;
      font-size: 14px;
      cursor: pointer;
      padding: 12px 44px;
    }
  }
  .meaber_deatil {
    background: #ffffff;
    border-radius: 10px;
    width: 1120px;
    padding: 40px;
    margin-top: 30px;

    .meaber_deatil_img {
      padding: 10px 0;
      img {
        width: 100%;
      }
    }
  }
  .meaders_g {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: rgba($color: #000000, $alpha: 0.4);
    z-index: 100;

    .meaders_gm {
      background: #f8f8f8;
      border-radius: 10px;
      width: 460px;
      height: 643px;
      margin: 0 auto;
      margin-top: 30px;
      overflow: hidden;
      .header_gm {
        padding: 32px 0 8px 34px;
        background: #ffffff;
        font-size: 24px;
        color: #414141;
        i {
          color: #c8c8c8;
          padding: 10px;
          position: relative;
          font-size: 24px;
        }
      }
      .gm {
        background: #ffffff;
        padding: 28px 46px;
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        i {
          color: #c8c8c8;
          position: relative;
          font-size: 24px;
          top: -2px;
        }
        > span {
          img {
            width: 28px;
            position: relative;
            top: 8px;
          }
        }
      }
    }
    .input {
      padding: 0 32px;
      margin-top: 60px;
      .el-input--prefix .el-input__inner {
        padding-left: 30px;
        margin: 20px 0;
      }
    }
    .input_button {
      padding: 0 32px;
      margin-top: 60px;
      .el-button {
        color: #fff;
        width: 100%;
      }
    }
  }
  .wxCode {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: rgba($color: #000000, $alpha: 0.4);
    z-index: 110;

    .wxCode_sys {
      padding: 20px;
      border-radius: 10px;
      background: #fff;
      margin: 0 auto;
      margin-top: 36px;
      width: 300px;
      height: 400px;
      position: relative;
      > h3 {
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
        margin-bottom: 30px;
      }
      .cutwx_code {
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 20px;
        .el-icon-close {
          color: #409eff;
          font-size: 20px;
        }
      }
      .wxCode_img {
        margin: 0 auto;
        width: 200px;
        img {
          display: block;
          width: 80px;
          margin: 0 auto;
        }
        h4 {
          line-height: 40px;
          text-align: center;
        }
      }
      .wxCode_code {
<<<<<<< HEAD
        width: 150px;
=======
        width: 132px;
>>>>>>> 314b442cce11d658746227581b0160373004c345
        margin: 0 auto;
      }
    }
  }
<<<<<<< HEAD
  .zfb_form {
    width: 600px;
    height: 600px;
  }
=======
>>>>>>> 314b442cce11d658746227581b0160373004c345
}
</style>